<template>
  <div style="width: 100%; height: 100%">
    <div style="height: 15%">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">博客管理</el-menu-item>
        <el-menu-item index="3">题库管理</el-menu-item>
      </el-menu>
    </div>
    <div
      style="
        width: 100%;
        height: 800px;
        background-color: #fff;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
      "
    >
      <div style="padding: 20px">
        <span>开启美好的上班的一天！！！</span>
        <button
          style="
            width: 70px;
            height: 46px;
            background-color: rgb(17, 188, 255);
            border: 0px;
            border-radius: 5px;
            color: #fff;
            margin-left: 80%;
          "
          @click="quit()"
        >
          退出登录
        </button>
      </div>
      <div style="margin-left: 20px">
        <img
          src="../assets/1685428685123.jpg"
          style="
            width: 460px;
            height: 280px;
            border-radius: 14px;
            border: 3px solid yellowgreen;
          "
        />
      </div>
      <div style="margin: 50px">
        <el-row>
          <el-col :span="7"
            ><div id="main" style="width: 400px; height: 300px"></div
          ></el-col>
          <el-col :span="7"
            ><div id="main1" style="width: 400px; height: 300px"></div
          ></el-col>
          <el-col :span="7"
            ><div id="main2" style="width: 400px; height: 300px"></div
          ></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeIndex: "1",
      SevenDayList: [],
      HourlyReleaseVolume: [],
      CheckNum:[],
    };
  },
  mounted() {
    this.drawChart();
    this.drawChart1();
    this.drawChart2();
  },
  methods: {
    handleSelect(key) {
      if (key == 1) {
        this.$message({
          message: "请不用重复点击同一个路由！！",
          type: "warning",
        });
      } else if (key == 2) {
        this.$router.push("/blog");
      } else if (key == 3) {
        this.$router.push("/question");
      }
    },
    quit(){
      this.$router.push("/");
    },
    drawChart() {
      axios.get("http://localhost:8888/GetSevenDayList").then((response) => {
        this.SevenDayList = response.data;
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        let myChart = this.$echarts.init(document.getElementById("main"));
        // 指定图表的配置项和数据
        let option = {
          title: {
            text: "近七日博客发布量",
          },
          tooltip: {},
          legend: {
            data: ["发布量"],
          },
          xAxis: {
            data: [
              "一天前",
              "两天前",
              "三天前",
              "四天前",
              "五天前",
              "六天前",
              "七天前 ",
            ],
          },
          yAxis: {},
          series: [
            {
              name: "发布量",
              type: "bar",
              data: this.SevenDayList,
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      });
    },
    drawChart1() {
      axios
        .get("http://localhost:8888/GetHourlyReleaseVolume")
        .then((response) => {
          this.HourlyReleaseVolume = response.data;
          console.log(this.HourlyReleaseVolume);
          // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
          let myChart = this.$echarts.init(document.getElementById("main1"));
          // 指定图表的配置项和数据
          let option = {
            title: {
              text: "今日博客发布量折线图",
            },
            xAxis: {
              type: "category",
              data: [
                "1",
                "2",
                "3",
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "10",
                "11",
                "12",
                "13",
                "14",
                "15",
                "16",
                "17",
                "18",
                "19",
                "20",
                "21",
                "22",
                "23",
                "24",
              ],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: this.HourlyReleaseVolume,
                type: "line",
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        });
    },
    drawChart2() {
      axios.get("http://localhost:8888/CheckNum").then((response) => {
        this.CheckNum=response.data
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        let myChart = this.$echarts.init(document.getElementById("main2"));
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              name: "审核量",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: this.CheckNum[2], name: "未审核" },
                { value: this.CheckNum[0], name: "审核通过" },
                { value: this.CheckNum[1], name: "审核不通过" },
              ],
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      });
    },
  },
};
</script>

<style>
</style>